<template>
	<view class="detail">
		<view class="detail-crumbs">
			<text @click="toback">公告</text>
			<image src="@/static/images/login/youjiantou.png" mode=""></image>
		    <text>公告详情</text>
		</view>
		<view class="detail-title">
			<text>{{content.title}}</text>
		</view>
		<view class="detail-time">
			<image src="@/static/images/login/tiemthree.png" mode=""></image>
		    <text>{{content.update_time}}</text>
		</view>
		<view class="detail-images" v-html="content.content">
			<!-- <image fade-show src="../../static/ico/helpban.png" mode="widthFix"></image> -->
		</view>
	<!-- 	<view class="detail-narrate">
			<view class="detail-narrate-title">
				<text>亲爱的疯传数藏用户：</text>
			</view>
			<view class="detail-narrate-center">
				<text>自由人平台郑重提醒广大用户：不使用第三方工具锁单、抢单！不影响其他藏家之间的正常转让寄售；以免引起自身iBox账号被封禁、绑定支付账号被冻结等不必要的损失，也希望广大用户在接收到任何非官方渠道的信息时，不轻信，不传谣，共同创造一个清新的网络环境。</text>
			</view>
			<view class="detail-narrate-center1">
				<text>自由人平台郑重提醒广大用户：不使用第三方工具锁单、抢单！不影响其他藏家之间的正常转让寄售；以免引起自身iBox账号被封禁、绑定支付账号被冻结等不必要的损失，也希望广大用户在接收到任何非官方渠道的信息时，不轻信，不传谣，共同创造一个清新的网络环境。自由人平台郑重提醒广大用户：不使用第三方工具锁单、抢单！不影响其他藏家之间的正常转让寄售；以免引起自身iBox账号被封禁、绑定支付账号被冻结等不必要的损失，也希望广大用户在接收到任何非官方渠道的信息时，不轻信，不传谣，共同创造一个清新的网络环境。</text>
			</view>
		</view> -->
		<!-- <view class="title">{{content.title}}</view>
		<view class="time">{{content.update_time}}</view>
		<view class="content" v-html="content.content"></view> -->
	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				id: '',
				content: {}
			}
		},
		onReady() {

		},
		onLoad(e) {
			console.log('[参数]', e)
			this.id = e.id
			this.getDetail()
		},
		onPullDownRefresh() {
			this.getDetail()
		},
		onReachBottom() {

		},
		methods: {
			//获取列表
			async getDetail() {
				let list = await this.articleRead(this.id)
				console.log(JSON.stringify(list))
				if (list.code == 200) {
					this.content = list.data
				}
			},
			toback(){
				uni.navigateBack({
						delta:1,//返回层数，2则上上页
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
     .detail{
		 &-crumbs{
			 margin: 60rpx 0  0 40rpx;
			 display: flex;
			 align-items: center;
			 text:nth-child(1){
				 font-size: 26rpx;
				 font-family: PingFangSC-Regular, PingFang SC;
				 font-weight: 400;
				 color: #777E90;
			 }
			 image{
				 width: 14rpx;
				 height: 24rpx;
				 margin: 0 16rpx;
			 }
			 text:nth-child(3){
				 font-size: 26rpx;
				 font-family: PingFangSC-Semibold, PingFang SC;
				 font-weight: 600;
				 color: #468EFF;
			 }
		 }
		 &-title{
			margin: 42rpx 0 0 40rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #0F0B0F; 
		 }
		 &-time{
			margin:20rpx 0 0 40rpx;
			display: flex;
			align-items: center;
			 image{
			 	width: 24rpx;
			 	height: 24rpx;
				// margin-top: 20rpx;
				// position: absolute;
			 }
			 text{
				 font-size: 24rpx;
				 font-family: PingFangSC-Regular, PingFang SC;
				 font-weight: 400;
				 color: #737482;
				 margin-left: 10rpx;
			 }
		 }
		 &-images{
			 margin: auto;
			 margin-top: 36rpx;
			 width: calc(100vw - 80rpx);
			 ::v-deep img {
			 				max-width: 100%;
			 			}
			 // image{
				//  width: 100%;
			 // }
		 }
		 &-narrate{
			 &-title{
				 font-size: 28rpx;
				 font-family: PingFangSC-Semibold, PingFang SC;
				 font-weight: 600;
				 color: #252526;
				 margin: 32rpx 0 0 40rpx;
			 }
			 &-center{
				 padding-top: 23rpx;
                 width: calc(100vw - 80rpx);
				 font-size: 24rpx;
				 font-family: PingFangSC-Regular, PingFang SC;
				 font-weight: 400;
				 color: #777E90;
				 margin: auto;
			 }
			 &-center1{
				 padding-top: 24rpx;
				 width: calc(100vw - 80rpx);
				 font-size: 24rpx;
				 font-family: PingFangSC-Regular, PingFang SC;
				 font-weight: 400;
				 color: #777E90;
				 margin: auto;
			 }
		 }
	 }
</style>
